<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>后台管理模板</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
        <link rel="stylesheet" href="../../css/global.css" media="all">
        <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
        <link rel="stylesheet" href="../../datatables/media/css/jquery.dataTables.css">
        <link rel="stylesheet" href="../../datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css">
        <link rel="stylesheet" type="text/css" href="../../css/dateRange.css">
        <style type="text/css">
        .select {
        top:72px;
        }
        .accuratebtn {
        position: absolute;
        font-size: 14px;
        top: 72px;
        left: 171px;
        z-index: 99;
        }
        .accurate {
        position: absolute;
        top: 72px;
        left: 277px;
        z-index: 99;
        display: none;
        }
        .handytime {
        float: left;
        margin-right: 25px;
        }
        #div_date_select {
        float: left;
        }
        table.dateRangeDateTable th:first-child, table.dateRangeDateTable td:first-child {
        width: inherit;
        }
        #timeselect {
        border-radius: 0;
        font-size: 14px;
        color: #555;
        }
        </style>
    </head>
    <body>
        <div class="layui-layout layui-layout-admin" style="border-bottom: solid 5px #1aa094;">
            <!--头部导航-->
            <div class="layui-header header header-demo" ></div>
            <!--左侧导航-->
            <div class="layui-side layui-bg-black" id="admin-side">
            </div>
            <!--右侧具体内容-->
            <div class="layui-body" style="bottom: 0;border-left: solid 2px #1AA094;padding:20px" id="admin-body">
                <div class="title">订单列表</div>
                <hr />
                <div class="select">
                    <select  lay-verify="" onchange="" id="orderSequence">
                        <option value="">状态</option>
                        <option value="1">状态-未接单</option>
                        <option value="2">状态-已接单</option>
                        <option value="3">状态-正在采购</option>
                        <option value="4">状态-采购完成</option>
                        <option value="5">状态-正在寄件<span class="fa fa-long-arrow-down" aria-hidden="true"></span></option>
                        <option value="6">状态-派送中</option>
                        <option value="7">状态-已关闭</option>
                        <option value="8">状态-待确认收货</option>
                        <option value="9">状态-待评价</option>
                        <option value="10">状态-已完成</option>
                    </select>
                </div>
                <button class="layui-btn layui-btn-primary layui-btn-small accuratebtn">精确搜索</button>
                <div class="accurate">
                    <div class="handytime">
                        <select name="timeselect" id="timeselect">
                            <option value="">默认</option>
                            <option value="1">一周内</option>
                            <option value="2">一月内</option>
                            <option value="3">三月内</option>
                            <option value="4">半年内</option>
                        </select>
                    </div>
                    <div class="ta_date" id="div_date_demo3">
                        <span class="date_title" id="date_demo3">2017-07-13 至 2017-07-19</span>
                        <a class="opt_sel" id="input_trigger_demo3" href="#">
                            <i class="i_orderd"></i>
                        </a>
                    </div>
                </div>
                <div class="layui-form">
                    <table class="layui-table" id="orderTable">
                        <thead>
                            <tr>
                                <th><input type="checkbox" name="" id="checkall" onchange="checkAll(this,'#orderTable')"></th>
                                <td style="display:none;">订单id</td>
                                <th>请求方</th>
                                <th>代购方</th>
                                <th>快递员</th>
                                <th>创建时间</th>
                                <th>完成时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="checkbox" name="ordercheck" id="" ></td>
                                <td style="display:none;">订单id</td>
                                <td><img src="../../images/1.jpg"><span>adad</span></td>
                                <td><img src="../../images/0.jpg"><span>lzy</span></td>
                                <td><img src="../../images/xiaosong.jpg"><span>dsaf</span></td>
                                <td>2017-6-30</td>
                                <td>2017-6-30</td>
                                <td>使用中</td>
                                <td><div class="layui-btn  layui-btn-small">详情</div><div class="layui-btn layui-btn-danger  layui-btn-small orderclose">关闭</div></td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="ordercheck" id="" ></td>
                                <td style="display:none;">订单id</td>
                                <td><img src="../../images/6.jpg"><span>adad</span></td>
                                <td><img src="../../images/find_1.png"><span>lzy</span></td>
                                <td><img src="../../images/0.jpg"><span>dsaf</span></td>
                                <td>2017-6-30</td>
                                <td>2017-6-30</td>
                                <td>使用中</td>
                                <td><div class="layui-btn  layui-btn-small">详情</div><div class="layui-btn layui-btn-danger  layui-btn-small orderclose">关闭</div></td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="layui-btn layui-btn-danger  layui-btn-small closeall" id="ordercloseall">批量关闭</div>
                    
                </div>
            </div>
            <!--底部导航-->
            <div class="layui-footer footer footer-demo" id="admin-footer"></div>
            <!--JS模块-->
            <script type="text/javascript" src="../../layui/layui.js"></script>
            <script src="../../js/jquery-1.12.3.min.js"></script>
            <script src="../../js/index.js"></script>
            <script type="text/javascript" src="../../js/jquery.cookie.js"></script>
            <script type="text/javascript" src="../../js/dateRange.js"></script>
            <!-- DataTables JavaScript -->
            <script src="../../datatables/media/js/jquery.dataTables.min.js"></script>
            <script type="text/javascript">
            $(function() {
            $("#order").addClass('layui-this'); //对应订单管理的背景色
            $('#orderTable').DataTable({
            responsive: true,
            ordering: false,
            searching: true,
            "bLengthChange": false,
            "bRetrieve": true,
            "bFilter": true //过滤功能
            });
            var dateRange = new pickerDateRange('date_demo3', {
            isTodayValid: true,
            startDate: '2013-04-14',
            endDate: '2013-04-21',
            defaultText: ' 至 ',
            inputTrigger: 'input_trigger_demo3',
            theme: 'ta',
            success: function(obj) {
            //自定义的回调函数 callback();
            }
            });
            //精确搜索！！！！！！！
            $('.accuratebtn').on('click',function(){
            if ($('.accurate').css('display')=='none') {
            $('.accurate').css('display','block')
            } else {
            $('.accurate').css('display','none')
            }
            })
            $("table tbody").append('<tr>\
                <td><input type="checkbox" name="ordercheck" id="" ></td>\
                <td style="display:none;">订单id</td>\
                <td><img src="../../images/6.jpg"><span>adad</span></td>\
                <td><img src="../../images/find_1.png"><span>lzy</span></td>\
                <td><img src="../../images/0.jpg"><span>dsaf</span></td>\
                <td>2017-6-30</td>\
                <td>2017-6-30</td>\
                <td>使用中</td>\
                <td><div class="layui-btn  layui-btn-small">详情</div><div class="layui-btn layui-btn-danger  layui-btn-small orderclose">关闭</div></td>\
            </tr>')
            $("table tbody").append('<tr>\
                <td><input type="checkbox" name="ordercheck" id="" ></td>\
                <td style="display:none;">订单id</td>\
                <td><img src="../../images/1.jpg"><span>adad</span></td>\
                <td><img src="../../images/0.jpg"><span>lzy</span></td>\
                <td><img src="../../images/xiaosong.jpg"><span>dsaf</span></td>\
                <td>2017-6-30</td>\
                <td>2017-6-30</td>\
                <td>使用中</td>\
                <td><div class="layui-btn  layui-btn-small">详情</div><div class="layui-btn layui-btn-danger  layui-btn-small orderclose">关闭</div></td>\
            </tr>')
            adminCookie()
            })
            </script>
            
        </div>
    </body>
</html>